<template>
  <div class="login_contanier">
    <el-row>
      <el-col :span="12" :xs="0"></el-col>
      <el-col :span="12" :xs="24">
        <!-- 表单元素-->
        <el-form class="login_form" :model="loginForm" :rules="rules" ref="loginForms">

          <h1>Hello</h1>
          <h2>欢迎来到硅谷甄选</h2>

          <!--输入框1-->
          <el-form-item class="login_input" prop="username">
            <el-input type="text" :prefix-icon="User" v-model="loginForm.username"></el-input>
          </el-form-item>
          <!--输入框2-->
          <el-form-item class="login_input" prop="password">
            <el-input type="password" :prefix-icon="Lock" v-model="loginForm.password" show-password></el-input>
          </el-form-item>
          <!--按扭-->
          <el-form-item class="login_btn_box">
            <el-button style="width: 100%" type="primary" @click="login" :loading="showloading">登录</el-button>
          </el-form-item>

        </el-form>

      </el-col>
    </el-row>

  </div>
</template>

<script setup lang="ts">
//@ts-ignore
import {User, Lock} from '@element-plus/icons-vue'
import {reactive, ref} from "vue";
import userStore from "../../piniaStore/moudules/userStore.ts";
import {useRouter} from "vue-router";
import {ElNotification} from "element-plus";
import {getTime} from "../../utils/time.ts";
//收集账号与密码的数据
let loginForm = reactive({username: 'admin', password: '111111'})
let showloading = ref(false);
//引入用户小仓库
let useUserStore = userStore();
//获取路由器
let $router = useRouter();

let loginForms = ref();//拿到表单loginForms的VC实例
//登录按扭的回调
let login = async () => {
  //保证全部的表单校验通过再发请求
  await loginForms.value.validate();
  //点击登录按扭以后
  showloading.value = true //开始转
  //通知仓库发登录请求
  try {
    //保证登录成功
    await useUserStore.userLogin(loginForm); //获取到成功的promis对象
    $router.push('/')
    //登录成功的提示信息
    ElNotification({
      type: 'success',
      title: `hi,${getTime()}~`,
      message: '欢迎回来'
    });
    showloading.value = false;
  } catch (error) {
    showloading.value = false;
    ElNotification({
      type: 'error',
      message: (error as Error).message
    });
  }
}
//自定义校验规则
//@ts-ignore
let valiFun = (rule: any, value: any, callback: any) => {
  /**
   *   rule:即为校验规则对象
   *   value：文本内容
   *   函数：如果符合条件callBack放行通过
   *   如果不符合条件，注入错误提示信息
   */
  if (value.length>4) {
    callback();
  } else {
    callback(new Error('账号长度至少5位'));
  }
}

//定义表单校验规则
let rules = {
  username: [
    {required: true, message: '用户名不能为空', trigger: "change"},
    // {min: 5, message: '用户名必须大于5个字符', trigger: "change"},
    // {max: 15, message: '用户名过长', trigger: "change"},
    {validator: valiFun, trigger: "change"}
  ],
  password: [
    {required: true, message: '密码不能为空', trigger: "change"},
    {min: 5, message: '密码必须大于5个字符', trigger: "change"},
    {max: 24, message: '密码过长', trigger: "change"},
  ]
}



</script>

<style scoped lang="scss">
.login_contanier {
  width: 100%;
  height: 100vh;
  background: url("../../assets/imgs/bg.jpg") no-repeat;
  background-size: cover;

  .login_form {
    position: relative; //相对定位
    width: 60%; //右侧的80%
    top: 30vh; //适口宽度的30%
    left: 200px;
    padding: 20px;

    h1 {
      color: deepskyblue;
      font-size: 40px;
    }

    h2 {
      color: deepskyblue;
      font-size: 20px;
      margin: 20px 0;
    }

    .login_input {
      padding: 0 20px;
    }

    .login_btn_box {
      padding: 0 20px;
      display: flex;
    }
  }
}

</style>